<template>
  <div class="exam-file-wrap">
    <div class="exam-file-video" v-if="isVodFile">
      <!-- <web-view
      class="iframe-video"
      :ref="'webview' + id"
      :webview-styles="{
        width: '100%',
        height: '200px',
        margin: '100px 0 0 0',
        progress: 'true',
        position: 'static'
      }"
      :src="iframeSrc"
      @message="handleMessage"
      :fullscreen="false"
      :update-title="false"></web-view> -->
      <iframe :id="'webview' + id" :src="iframeSrc" class="iframe-video"></iframe>
      <view :iframeMsg="iframeMsg" :change:iframeMsg="renderModal.handleIframeMsg"></view>
    </div>
    <div class="exam-file-video" v-else-if="type === 1">
      <video
          class="videoEle"
          :id="'videoEle' + id"
          :src="videoSrc"
          @play="handleVideoPlay"
          v-show="videoShow"></video>
    </div>
    <div v-else-if="type === 2">
      <van-audio
          :src="audioSrc"
          :poster="audioPlay"
          name="附件"
          controls
          :initAudio="initAudioEvents"
          @onPlay="handleAudioPlay"></van-audio>
    </div>
    <div v-else-if="type === 3">
      <van-image lazy-load :src="computedUrl" fit="fill" />
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { parse, getStrUrl, parseQuery } from '@/assets/js/util'
import audioCoverImg from '@/static/image/audio_disk_default.jpg'
import VanAudio from "@/components/vant/van-audio/van-audio.vue";
import VanImage from "@/components/vant/van-image/van-image.vue";
export default {
  components: {VanAudio, VanImage},
  data() {
    return  {
      videoSrc: '',
      audioSrc: '',
      audioPlay: '',
      iframeSrc: '',
      iframeMsg: null
    }
  },
  props: {
    type: {
      type: Number,
      default: 0
    },
    id: {
      type: [Number, String],
      default: 0
    },
    url: {
      type: String,
      default: ''
    },
    fileStorage: {
      type: Object,
      default: () => {}
    },
    videoShow: {
      type: Boolean,
      default: true
    }
  },
  mounted() {
    if (this.type) {
      this.$nextTick(this.init)
    }
  },
  beforeDestroy() {
    this.close()
  },
  watch: {
    url (n, o) {
      if (o) {
        this.close()
      }
      this.$nextTick(this.init)
    },
    fileStorage (n, o) {
      if (o) {
        this.close()
      }
      this.$nextTick(this.init)
    },
    currentDplayer (val) {
      if (val != this.id) {
        this.iframeMsg = {
          id: this.id,
          type: 'pause'
        }
      }
    }
  },
  computed: {
    ...mapGetters({
      audioPlayImg: 'siteInfo/audioPlayImg',
      currentDplayer: 'unread/currentDplayer',
    }),
    isVodFile() {
      return this.fileContent && this.fileContent.uploadType === 'TVOD'
    },
    fileContent() {
      if (this.fileStorage && this.fileStorage.contentUrl) {
        return parse(this.fileStorage.contentUrl)
      }
      return null
    },
    computedUrl() {
      if (this.fileContent) {
        return this.fileContent.playcode || this.fileContent.viewUrl || ''
      }
      return this.url
    }
  },
  methods: {
    ...mapActions({
      updateCurrentDplayer: 'unread/updateCurrentDplayer'
    }),
    init() {
      if (this.isVodFile) {
        this.iframeSrc = `static/html/file.html?id=${this.id}&fileID=${this.fileContent.fileID}&appId=${this.fileContent.appId}&sign=${this.fileContent.sign}`
        // this.initVideoEvents()
      } else if (this.type === 1) {
        this.videoSrc = this.computedUrl
        this.initVideoEvents()
      } else if (this.type === 2) {
        this.audioSrc = this.computedUrl
        this.audioPlay = this.audioPlayImg || audioCoverImg
      }
    },
    handleMessage(e) {
      if (e.type === 'play') {
        if (getApp().globalData.currentDplayer) {
          getApp().globalData.currentDplayer.pause()
        }
        if (getApp().globalData.currentAudio) {
          getApp().globalData.currentAudio.pause()
        }
        this.updateCurrentDplayer(e.value || '')
      } else if (e.type === 'fullscreenchange') {
        if (e.value) {
          plus.screen.lockOrientation('landscape-primary');
        } else {
          plus.screen.lockOrientation('portrait-primary')
        }
      }
    },
    handleReset() {
      this.iframeMsg = null
    },
    initAudioEvents(initAudio) {
      this.audioPlayer = initAudio
    },
    handleAudioPlay(){
      if (getApp().globalData.currentDplayer) {
        getApp().globalData.currentDplayer.pause()
      }
      if (getApp().globalData.currentAudio) {
        getApp().globalData.currentAudio.pause()
      }
      this.updateCurrentDplayer('')
      getApp().globalData.currentAudio = this.audioPlayer
    },
    initVideoEvents(id) {
      this.dplayer = uni.createVideoContext('videoEle' + this.id, this)
    },
    handleVideoPlay(){
      if (getApp().globalData.currentDplayer) {
        getApp().globalData.currentDplayer.pause()
      }
      if (getApp().globalData.currentAudio) {
        getApp().globalData.currentAudio.pause()
      }
      this.updateCurrentDplayer('')
      getApp().globalData.currentAudio = this.dplayer
    },
    close() {
      this.updateCurrentDplayer('')
      if (this.audioPlayer) {
        this.audioPlayer.pause()
      }
      if (this.dplayer) {
        this.dplayer.pause()
      }
    }
  }
}
</script>
<script module="renderModal" lang="renderjs">
export default {
  data() {
    return {
    }
  },
  mounted() {
    // 接收iframe传过来的值
    window.addEventListener('message',  (e)=> {
      this.emitData(e.data) 
    });
  },
  methods: {
    emitData(e) {
        this.$ownerInstance.callMethod('handleMessage',e)
    },
    handleIframeMsg(e) {
      let ob = document.getElementById('webview' + e.id)
      if (e) {
        ob.contentWindow.postMessage(Object.assign({}, e),'*')
      }
      this.$ownerInstance.callMethod('handleReset',e)
    }
  }
}
</script>
<style lang="scss" scoped>
.exam-file-wrap{
  padding-bottom: 15px;
  .exam-file-video{
    position: relative;
    height: 200px;
    .iframe-video{
      position: static;
      width: 100%;
      height: 200px;
      border: none;
      :deep(iframe) {
        width: 100% !important;
        height: 200px !important;
        border: none;
      }
    }
  }
  .el-image{
    max-width: 100%;
  }
  .audioEle{
    width: 100%;
    :deep(.aplayer-pic) {
      background-size: cover !important;
    }
    :deep(.aplayer-music) {
      line-height: 20px;
    }
  }
  .videoEle{
    position: absolute;
    width: 100%;
    height: 200px;
    :deep(.video-js) {
      width: 100%;
      height: 200px;
    }
  }
  .van-image{
    width: 70%;
  }
}
</style>